<template>
  <div>
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandler" @onCollapse="collapseHandle" />
    <FilterTable
      ref="table"
      columnsRef="jzyCardTyp3e"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :isSelectColumn="false"
      :onRowSelectChange="rowSelectHandle"
      :onColumnsChange="columns => (this.columns = columns)"
      :isExportExcel="true"
      exportFileName="配件及服务支持价格折让查询.xlsx"
    >
      <!-- <template slot="moreActions">
        <span @click="removeRecordHandle">删除数据</span>
      </template>
      <template slot="controls">
         <el-button size="small" type="primary" icon="el-icon-plus" @click="addRecordHandle">新建</el-button>

        <el-button size="small" icon="el-icon-printer">打印</el-button>
      </template>-->
    </FilterTable>
  </div>
</template>

<script>
// 数据字典/按钮权限
import { dictionary } from '@/utils/dictMixin';
import { jsonToHump } from '@/utils/index';
import { getPartsAndServiceSupportList } from '@/api/part/report/partsAndServiceSupport';
import { getStroageList } from '@/api/part/partOutbound/partBreak';
import moment from 'moment';
export default {
  name: 'CardType',
  components: {},
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    this.selectedRow = null;
    this.editData = {};
    return {
      topFilterList: this.createTopFilters(),
      columns: this.createTableColumns(),
      fetchApi: getPartsAndServiceSupportList,
      fetchParams: { xhrAbort: true },
      actions: { visible: false, type: '', title: '' } // 弹出面板的相关信息
    };
  },
  // created() {
  //   this.getStorage();
  // },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTopFilters() {
      return [
        {
          type: 'RANGE_DATE',
          label: '返利日期',
          initialValue: [
            moment()
              .startOf('month')
              .format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
          ],
          fieldName: 'ERDAT_START|ERDAT_END'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '创建时间',
          dataIndex: 'ERZET',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateType: 'datetime'
        },
        {
          title: '创建日期',
          dataIndex: 'ERDAT',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateType: 'date'
        },
        {
          title: '返利创建人',
          dataIndex: 'ERNAM',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '折让比例',
          dataIndex: 'ZZRBL',
          sorter: true,
          filter: true,
          precision: 2,
          filterType: 'number'
        },
        {
          title: '发票开始日期',
          dataIndex: 'ZKDAT',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '发票截止日期',
          dataIndex: 'ZJDAT',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '折让发票总额',
          dataIndex: 'ZFPZE',
          sorter: true,
          filter: true,
          precision: 2,
          filterType: 'number'
        },
        {
          title: '日期区间',
          dataIndex: 'ZQJ',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '返利类型',
          dataIndex: 'ZFLLX',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '红包请款金额',
          dataIndex: 'ZHBQK',
          sorter: true,
          filter: true,
          precision: 2,
          filterType: 'number'
        },
        {
          title: '应付返利金额',
          dataIndex: 'ZFLJE',
          sorter: true,
          filter: true,
          precision: 2,
          filterType: 'number'
        },
        {
          title: '本次已付金额',
          dataIndex: 'ZYFJE',
          sorter: true,
          filter: true,
          precision: 2,
          filterType: 'number'
        },
        {
          title: '欠付返利金额',
          dataIndex: 'ZQFJE',
          sorter: true,
          filter: true,
          precision: 2,
          filterType: 'number'
        },
        {
          title: '支付方式',
          dataIndex: 'ZZFFS',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '支付凭证号',
          dataIndex: 'ZZFPZ',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '折扣剩余金额',
          dataIndex: 'ZSYJE',
          sorter: true,
          filter: true,
          precision: 2,
          filterType: 'number'
        },
        // {
        //   title: '已付标识',
        //   type: 'CHECKBOX',
        //   label: '已付标识',
        //   fieldName: 'ZYFBS',
        //   placeholder: '',
        //   filterItems: this.createDictList('1004'),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.isPay, '1004')}</span>;
        //   }
        // },

        {
          title: '已付标识',
          dataIndex: 'ZYFBS',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '打印标识',
          dataIndex: 'ZDYBS',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '打印标识',
        //   type: 'CHECKBOX',
        //   label: '打印标识',
        //   fieldName: 'ZDYBS',
        //   placeholder: '',
        //   initialValue: '10041002',
        //   options: { trueValue: '10041001', falseValue: '10041002' },
        //   filterItems: this.createDictList('1004'),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.isShow, '1004')}</span>;
        //   }
        // },
        {
          title: '发票打印日期',
          dataIndex: 'ZPDAT',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateType: 'date'
        },
        {
          title: '发票打印时间',
          dataIndex: 'ZPZET',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateType: 'datetime'
        },
        {
          title: '发票打印客户',
          dataIndex: 'ZPNAM',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    async getStorage() {
      const res = await getStroageList();
      this.topFilterList.find(item => item.fieldName === 'STORAGE_CODE').itemList = res.data.map(x => ({ text: x.STORAGE_NAME, value: x.STORAGE_CODE }));
    },
    addRecordHandle() {
      this.actions = { visible: true, type: 'add', title: '新增会员卡信息' };
    },
    editRecordHandle(row) {
      if (!row) return;
      this.editData = row;
      this.actions = { visible: true, type: 'edit', title: '编辑会员卡信息' };
    },
    changeHandler(val) {
      this.fetchParams.xhrAbort = true;
      // this.fetchParams = { ...val };
      this.fetchParams = Object.assign({}, { xhrAbort: false }, val);
    },
    rowSelectHandle(rows) {
      if (!rows.length) return;
      this.selectedRow = rows[0];
    },

    // 主页面刷新
    refreshHandle() {
      this.fetchParams = { ...this.fetchParams };
    },

    // 适配 BaseTable 组件
    collapseHandle() {
      this.$nextTick(this.BaseTable.EXECUTE_RESET_HEIGHT);
    }
  }
};
</script>

<style lang="less" scoped></style>
